<script setup lang="ts">
import { ElTable, ElTableColumn, ElButton } from 'element-plus'
import PanelGroup from './components/AdminPanelGroup.vue'
// import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
// import { Echart } from '@/components/Echart'

import { ref } from 'vue'
import { getOfflineHotelApi } from '@/api/dashboard/admin'
import { Hotel } from '@/api/hotel/types'

const loading = ref(true)
const data = ref<Hotel[]>([])

const getAllApi = async () => {
  const { data: rows } = await getOfflineHotelApi()
  data.value = rows
  loading.value = false
}

getAllApi()
</script>

<template>
  <PanelGroup />
  <div style="background-color: white; padding: 20px">
    <div
      style="
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      "
    >
      <h6>接口异常主体列表</h6>
      <ElButton type="primary" @click="getAllApi" :loading="loading">刷新</ElButton>
    </div>

    <ElTable
      v-loading="loading"
      :data="data"
      stripe
      highlight-current-row
      header-cell-class-name="cu-header-cell"
    >
      <ElTableColumn prop="code" label="代码" show-overflow-tooltip />

      <ElTableColumn prop="name" label="名称" show-overflow-tooltip />

      <ElTableColumn label="状态" show-overflow-tooltip> 离线 </ElTableColumn>
    </ElTable>
  </div>
</template>
